<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ name }}</p>
        <input v-model="name" type="text" />
        <hr>

        <p>{{ user.age }}</p>
        <input v-model.number="user.age" type="text" />
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'tom',
            user:{
                id:1001,
                name:'alice',
                age:18
            }
        },
        watch:{ // 方式1：通过watch选项
            name:function(newValue,oldValue){
                console.log(`name被修改了，原值：${oldValue}，新值：${newValue}`)
            },
            // user:{
            //     handler:function(newValue,oldValue){
            //          // 由于对象是引用数据类型，指定的是同一内存地址，所以Vue不会保留之前的值
            //         console.log('user被修改了',oldValue,newValue)
            //     },
            //     deep:true, // 深度监视，当对象中属性发生变化时也会监视
            //     immediate: true // 开启初始化触发
            // }
            // 'user.age':function(newValue,oldValue){
            //     console.log(`user.age被修改了，原值：${oldValue}，新值：${newValue}`)
            // }
        }
    })

    // 方式2：$watch()方法
    var unwatch = vm.$watch('user',function(newValue,oldValue){
        console.log('user被修改了',oldValue,newValue)

        if(newValue.age>50){
            console.log('取消监视。。。。。')
            unwatch() // 调用函数，取消监视
        }
    },{
        deep:true,
        immediate:true
    })

</script>
</html>